.name {
  font-size: 14px;
  margin-bottom: 0;
}

.wrapper {
  border-radius: 0.5rem;
  padding: 0 1rem;
  display: flex;
  align-items: center;

  .color-shadow {
    box-shadow: 0 0 3px #0000001a;
  }

  .hex-wrapper {
    display: flex;
    align-items: center;
    flex-direction: row;
    font-size: 14px;
    padding: 0 1rem;

    &.pointer {
      cursor: pointer;
    }

    .hex {
      font-size: 16px;
    }
  }

  button {
    margin: 0.5rem 0;
    border-radius: 0.5rem;
    height: 35px;
    width: 35px;
    display: flex;
    align-items: center;
    border: none;
    justify-content: space-between;
  }
}

.picker {
  position: relative;
}

.close-icon {
  position: absolute;
  top: 0;
  right: 0;
  transform: translateX(50%) translateY(-50%);
}

::ng-deep .chrome-picker {
  border-radius: 0.5rem !important;
  box-shadow:
    0 0 1px #00000020,
    0 1px 3px #00000020 !important;
}

::ng-deep .saturation {
  border-radius: 0.5rem 0.5rem 0 0 !important;
}
